<template>
  <header class="todo-header">
    <div class="search-box">
      <input
        type="text"
        v-model="searchQuery"
        @input="filterSuggestions"
        class="search-input"
        placeholder="请输入城市名称"
      />
      <div class="select-box">
        <ul v-if="filteredSuggestions.length && searchQuery.length > 0">
          <li
            v-for="label in filteredSuggestions"
            :key="label"
            @click="selectSuggestion(label.label, label.value)"
          >
            {{ label.label }}
          </li>
        </ul>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import axios from 'axios'
const router = useRouter()
const route = useRoute()
const searchQuery = ref('')

const allLabels = ref([])
const allValues = ref([])

const extractLabels = (items) => {
  let labels = []
  items.forEach((item) => {
    labels.push(item.label)
    if (item.children && item.children.length > 0) {
      labels = labels.concat(extractLabels(item.children))
    }
  })
  return labels
}
const extractValues = (items) => {
  let values = []
  items.forEach((item) => {
    values.push(item.value)
    if (item.children && item.children.length > 0) {
      values = values.concat(extractValues(item.children))
    }
  })
  return values
}
const loadAll = async () => {
  try {
    const response = await axios.get(
      'http://project.x-zd.net:3001/apis/citylist'
    )
    allLabels.value = extractLabels(response.data.data)
    allValues.value = extractValues(response.data.data)
    
  } catch (error) {
    console.error('Failed to load city list:', error)
  }
}
const filteredSuggestions = computed(() => {
  return allLabels.value
    .filter((label) =>
      label.toLowerCase().includes(searchQuery.value.toLowerCase())
    ) // 根据搜索查询过滤
    .map((label) => ({
      label,
      value: allValues.value[allLabels.value.indexOf(label)], // 获取对应的值
    }))
})

const selectSuggestion = (label, value) => {
  
  searchQuery.value = label
  if (value) {
    const www=route.query
    router.push({ path: '/weather', query: { city: label, value: value, xx: 'header', from : www } });
  }
}
  

// 在组件挂载时加载数据
onMounted(() => {
  loadAll()
})
</script>

<style lang="scss" scoped>
.todo-header {
  max-width: 726px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;

  .search-box {
    padding-top: 1rem;
    margin-bottom: 2rem;
    position: relative;
  }
  .search-input {
    border: none;
    border-bottom: 1px solid white;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: transparent;
    border-bottom-width: 1px;
    width: 100%;
    font-family: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: white;
    margin: 0;
    .search-input::placeholder {
      color: white;
    }
    &:focus {
      box-shadow: 0 4px 5px -5px rgba(0, 0, 0, 0.5);
      outline: none; /* 移除默认的聚焦轮廓 */
      border-bottom: none;
    }
  }
  .select-box {
    overflow: hidden;
    color : white;
    scrollbar-width: none;
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      border: none;
      max-height: 150px;
      height: 100%;
      width: calc(100% + 17px);
      overflow-y: scroll;
      padding-right: 15px;
      background-color: rgb(0 78 113);
    }
    li {
      padding: 8px;
      cursor: pointer;
    }
  }
}
.todo-header .add-todo button:hover {
  cursor: pointer;
  background-color: #fff;
  color: #ff6700;
}
</style>
